import { useLayout } from "./../../context";
import "./GridLines.css";
export default function GridLines() {
  const { gridCount, gridSize } = useLayout();

  return (
    <div className="gridlines">
      <div className="row-line">
        {Array.from({ length: gridCount }).map((_, i) => (
          <div className="line" key={i} style={{ height: gridSize }}></div>
        ))}
      </div>
      <div className="col-line">
        {Array.from({ length: gridCount }).map((_, i) => (
          <div className="line" key={i} style={{ width: gridSize }}></div>
        ))}
      </div>
    </div>
  );
}
